<script lang="ts" setup>
import { Expand, Fold } from '@element-plus/icons-vue';

interface Props {
	isActive?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	isActive: false,
});

/** Vue 3.3+ defineEmits 语法 */
/* 
const emit = defineEmits(['change', 'update'])
.
props 和 emit 也可以通过给 defineProps 和 defineEmits 传递纯类型参数的方式来声明
.
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
.
const emit = defineEmits<{
  change: [id: number]     // 具名元组语法
  update: [value: string]
}>()

*/
const emit = defineEmits<{
	toggleClick: [];
}>();

const toggleClick = () => {
	emit('toggleClick');
};
</script>

<template>
	<div @click="toggleClick">
		<el-icon :size="20" class="icon">
			<Fold v-if="props.isActive" />
			<Expand v-else />
		</el-icon>
	</div>
</template>

<style lang="scss" scoped>
.icon {
	vertical-align: middle;
	color: var(--v3-hamburger-text-color);
}
</style>
